<template>
  <c-loading :loading="false">
    <view class="container afterlist">
      <view class="header-pad">
        <view class="fixed-header">
          <c-tabs v-model="state.status" @change="reload">
            <c-tab v-for="(item, i) in afterStatusMap" :value="item.value" :key="i">{{ item.name }}</c-tab>
          </c-tabs>
        </view>
      </view>
      <template v-for="(after, i) in list" :key="after.afterNo">
        <view class="after-wrap">
          <view class="after-title">
            <view class="after-no" @tap.stop="copy(after.afterNo)">
              售后单号：
              <text class="color-primary">{{ after.afterNo }}</text>
            </view>
            <view class="after-status" :class="afterStatusColor(after)" @tap="toInfo(after)">{{ after.afterStatusName }}</view>
          </view>
          <view class="after-item">
            <c-img class="img" :src="after.smallImg" />
            <view class="body grow">
              <view class="goods-name row2">{{ after.goodsName }}</view>
              <view class="flex-between al-center">
                <view class="sku-name">{{ after.skuDesc }}</view>
                <view class="qty">x{{ after.afterQty }}</view>
              </view>
              <view class="last">
                <view class="type">
                  {{ after.afterTypeName }}
                </view>
                <c-number v-if="after.refundPrice" class="price" prefix="￥" :value="after.refundPrice" :precision="2" />
              </view>
            </view>
          </view>
          <view class="after-foot">
            <view class="grow"></view>
            <c-button size="mini" v-if="after.afterStatus <= 1" plain type="warn" @tap="onCancel(after, i)">取消申请</c-button>
            <c-button size="inline" v-if="after.afterStatus == 1" type="primary" @tap="toSubmitLog(after, i)">填写物流单号</c-button>
            <c-button size="mini" v-if="after.reDeliveryTime && !after.reSignTime" type="primary" @tap="signFor(after, i)">确认签收</c-button>
            <c-button size="mini" @tap="toDetail(after, i)">查看详情</c-button>
          </view>
        </view>
      </template>
      <c-pager v-bind="pager"></c-pager>
    </view>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CTabs, CTab, CPager, CImg, CNumber } from '@/components';
import { usePager, useRouter } from '@/hooks';
import { View } from '@tarojs/components';
import api from '@/api';
import { reactive, ref } from 'vue';
import toast from '@/utils/toast';

const router = useRouter();
const state = reactive({
  status: 1
});
const afterStatusMap = [
  { value: 1, name: '售后中' },
  { value: 2, name: '售后完成' },
  { value: 3, name: '售后终止' }
];

const afterStatusColor = after => {
  switch (after.afterStatus) {
    case 0:
    case 5:
    case 10:
    case 11:
      return 'color-warn';
    case 30:
      return 'color-danger';
    case 31:
      return 'color-gray';
    default:
      return 'color-primary';
  }
};

const { loading, reload, pager, list } = usePager({
  handler: (skip, take) =>
    api.order.aftersalesUserList({
      ...state,
      skip,
      take
    })
});
const toDetail = (after, i) => {
  router.push('./info?id=' + after.afterNo).then(data => {
    if (data) list.value[i] = data;
  });
};
const toSubmitLog = (a, i) => {
  router.push(`/pagesOrder/aftersales/return?afterNo=${a.afterNo}&orderNo=${a.orderNo}`).then(data => {
    list.value[i].afterStatus = 5;
    list.value[i].afterStatusName = '退货中';
  });
};

const signFor = (after, i) => {
  toast.confirm('确认已收到货').then(data => {
    toast.loading.lock(() =>
      api.order
        .aftersalesExchangeSignFor({ id: after.afterNo })
        .toast('签收成功', true)
        .then(() => {
          list.value[i].afterStatus = 20;
          list.value[i].afterStatusName = '售后完成';
        })
    );
  });
};

const onCancel = (after, i) => {
  toast.confirm('确认取消申请').then(() => {
    toast.loading.lock(() =>
      api.order
        .aftersalesCancel({
          id: after.afterNo
        })
        .toast('取消成功', true)
        .then(() => {
          list.value[i].afterStatus = 31;
          list.value[i].afterStatusName = '申请取消';
        })
    );
  });
};
</script>
<style lang="scss">
.container.afterlist {
  .header-pad {
    height: 80px;
    .fixed-header {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 80px;
      z-index: 2;
    }
  }
  .after-wrap {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    background-color: var(--color-caption);
    border-radius: 10px;
    padding-top: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    .after-item {
      display: flex;
      align-items: stretch;
      padding: 30px 30px 10px;
      .img {
        flex-shrink: 0;
        width: 160px;
        height: 160px;
        margin-right: 20px;
        overflow: hidden;
        border-radius: 10px;
      }
      .body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goods-name {
          flex-grow: 1;
        }
        .sku-name {
          display: inline-block;
          line-height: 36px;
          height: 36px;
          font-size: 22px;
          color: var(--color-gray);
          &:last-of-type {
            margin-right: 0;
          }
        }
        .price {
          color: var(--color-danger);
        }
        .last {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .type {
            background-color: var(--color-primary);
            color: var(--color-caption);
            font-size: 22px;
            padding: 0 15px;
            line-height: 36px;
            border-radius: 6px;
          }
        }
        .qty {
          font-size: 24px;
        }
      }
    }
    .after-title {
      display: flex;
      justify-content: space-between;
      font-size: 24px;
      padding: 0 30px;
      .after-status.color-warn {
        font-weight: bold;
      }
    }
    .after-foot {
      display: flex;
      justify-content: flex-end;
      font-size: 26px;
      padding: 0 30px;
      height: 80px;
      align-items: center;
    }
  }
}
</style>
